<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- History -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/History -->
    <!-- History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。 -->

    <p>History.length</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/History/length -->
    <!-- History.length是一个只读属性，返回当前session中的history个数，包含当前页面在内。举个例子，对于新开一个tab加载的页面当前属性返回值1。 -->

    <hr style="border: solid 2px red;">

    <p>back()</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/History/back -->
    <!-- back()方法会在会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作。 -->
    <!-- 在浏览器历史记录里前往上一页, 用户可点击浏览器左上角的返回(译者注：←)按钮模拟此方法. 等价于 history.go(-1). -->
    <!-- Note: 当浏览器会话历史记录处于第一页时调用此方法没有效果，而且也不会报错。 -->

    <p>forward()</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/History/forward -->
    <!-- 在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进(译者注：→)按钮模拟此方法. 等价于 history.go(1). -->
    <!-- Note: 当浏览器历史栈处于最顶端时( 当前页面处于最后一页时 )调用此方法没有效果也不报错。 -->
    <!-- 在会话历史中向前移动一页。它与使用delta参数为1时调用 history.go(delta)的效果相同。 -->

    <p>go()</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/History/go -->
    <!-- 通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页. 当整数参数超出界限时( 译者注:原文为When integerDelta is out of bounds )，例如: 如果当前页为第一页，前面已经没有页面了，我传参的值为-1，那么这个方法没有任何效果也不会报错。调用没有参数的 go() 方法或者参数值为0时，重新载入当前页面。( 这点与支持字符串作为url参数的IE有点不同)。 -->
    <!-- go()方法从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动，具体取决于delta参数的值。 -->

    <hr style="border: solid 2px red;">
    <fieldset>
        <legend>history测试：在iframe中，创建n个url的历史记录来验证。</legend>
        <p>
            history的相关测试，可以通过iframe或window验证。
            如果使用window来验证，需要创建多个文件，然后在每一个文件中添加对应的操作。并且必须保证页面顺序与期望一致。这样对于测试有一些局限性。
            使用iframe来测试，好处是所有的测试都在也一个页面上，通过一个页面就可以验证。
        </p>
        <iframe name='iframe_test' src="" frameborder="0" style="background-color: green;"></iframe>
        <p id="info"></p>
        <br>
        <button onclick="doOpen('history_page_01.html')">打开"history_page_01.html"</button>
        <button onclick="doOpen('history_page_02.html')">打开"history_page_02.html"</button>
        <button onclick="doOpen('history_page_03.html')">打开"history_page_03.html"</button>
        <input type="url" placeholder="please input the url">
        <button onclick="doOpenCustomed()">打开</button>
        <br>
        <button onclick="doBack();">back</button>
        <button onclick="doForward();">forward</button>
        <input id="delta" type="number" placeholder="please input delta">
        <button onclick="doGo();">go</button>
        <br>
    </fieldset>
    <script>
        var iframe_window = undefined;
        function doOpen(url) {
            iframe_window = window.open(url, 'iframe_test', null);
            showHistoryLength();
        }
        function doOpenCustomed() {
            var urlNode = document.getElementById('url');
            doOpen(urlNode);
        }
        function doBack() {
            if (iframe_window) {
                iframe_window.history.back();
            }
            showHistoryLength();
        }
        function doForward() {
            if (iframe_window) {
                iframe_window.history.forward();
            }
            showHistoryLength();
        }
        function doGo() {
            if (iframe_window) {
                var deltaNode = document.getElementById('delta');
                var delta = parseInt(deltaNode.value);
                iframe_window.history.go(delta);
            }
            showHistoryLength();
        }
        function showHistoryLength() {
            if (iframe_window) {
                console.log('history.length is ' + iframe_window.history.length);
                var infoNode = document.getElementById('info');
                infoNode.innerText = 'history.length is ' + iframe_window.history.length;
            }
        }
    </script>

</body>

</html>